<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/12
  Time: 17:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
        <script src="${path}/resources/dist/js/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
        <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
        <style>
            #app {
                width: 600px;
                margin: 0px auto;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <template>
                <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 10px 0">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>游戏类型管理</el-breadcrumb-item>
                </el-breadcrumb>
                <el-form :inline="true" :model="gameSelect" class="user-search">
                    <el-form-item label="搜索：">
                        <el-input size="small" v-model="gameSelect.typeName" placeholder="输入游戏名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                        <el-button size="small" type="primary" icon="el-icon-plus" @click="addFlag = true">添加
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="typeList" stripe border>
                    <el-table-column prop="typeId" label="编号" width=200px></el-table-column>
                    <el-table-column prop="typeName" label="类型名" width=200px></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="editGame(scope.row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="deletethisChannel(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <%--添加游戏类型--%>
                <el-dialog title="添加游戏类型" :visible.sync="addFlag" :before-close="handleClose">
                    <el-form label-width="80px" :model="addType">
                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="游戏类型">
                                    <el-input type="text" v-model="addType.typeName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <span>
                    <el-button @click="addFlag = false">关闭</el-button>
                    <el-button @click="addGameType">提交</el-button>
                </span>
                </el-dialog>
                <%--修改游戏类型--%>
                <el-dialog title="修改游戏" :visible.sync="updateFlag" :before-close="handleClose">
                    <el-form label-width="80px" :model="update">
                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="游戏类型名">
                                    <el-input type="text" v-model="update.typeName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <span>
                    <el-button @click="updateFlag = false">关闭</el-button>
                    <el-button @click="updateGame">提交</el-button>
                </span>
                </el-dialog>
                <%--删除--%>

                <el-dialog title="删除该游戏类型" :visible.sync="deleteFlag" :before-close="handleClose">
                    <span>
                    <el-button @click=" deleteFlag = false">取消</el-button>
                    <el-button @click="deteleChannel">确定删除</el-button>
                </span>
                </el-dialog>

                <%--分页查询--%>
                <el-pagination background @current-change="currentChange" @size-change="sizeChange"
                               layout="sizes, prev, pager, next, jumper"
                               :page-sizes="[3, 6, 9]" :total="pageInfo.total" :page-size="pageInfo.pageNum"
                               :current-page="pageInfo.page"></el-pagination>
            </template>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    typeList: [],
                    gameSelect: {// 查询参数，搜索时的条件
                        typeName: "", // 游戏名称
                        method: "show",
                        nowPage: 1,
                        pageSize: 3
                    },
                    pageInfo: {
                        nowPage: 1,
                        pageSize: 2,
                        total: 3
                    },
                    addFlag: false,
                    updateFlag: false,
                    deleteFlag: false,
                    addType: {
                        typeName: "",
                    },
                    update: {
                        typeId: 1,
                        typeName: ""
                    },
                    detele: {
                        typeId: 1,
                    }
                },
                methods: {
                    //添加游戏类型
                    addGameType() {
                        let vm = this;
                        var data = window.Qs.stringify(this.addType);
                        axios({
                            url: "/type.do",
                            method: "post",
                            data: "method=addGameType&" + data,
                        }).then(function (response) {
                            if (response.data == "添加成功") {
                                vm.addFlag = false;
                                vm.search()
                            }
                        })

                    },
                    //修改游戏类型
                    editGame(row) {
                        this.updateFlag = true;
                        this.update = {
                            typeId: row.typeId,
                            typeName: row.typeName,
                        }
                    },
                    updateGame() {
                        let vm = this;
                        var data = window.Qs.stringify(this.update);
                        axios({
                            url: "/type.do",
                            method: "post",
                            data: "method=updateGameType&" + data
                        }).then(function (response) {
                            if (response.data == "修改成功") {
                                alert("修改成功")
                                vm.updateFlag = false;
                                vm.search()
                            }
                        })
                    },

                    //删除
                    deletethisChannel(row) {
                        this.deleteFlag = true;
                        this.detele = {
                            typeId: row.typeId
                        }
                    },
                    deteleChannel() {
                        let vm = this;
                        var data = window.Qs.stringify(this.detele);
                        axios({
                            url: "/type.do",
                            method: "post",
                            data: "method=deleteGameType&" + data
                        }).then(function (response) {
                            if (response.data == "删除成功") {
                                alert("删除成功")
                                vm.deleteFlag = false
                                vm.search()
                            }
                        })
                    },
                    //分页查询
                    search() {
                        var data = window.Qs.stringify(this.gameSelect);
                        var vm = this
                        axios.post("/type.do", data).then(response => {
                            vm.typeList = response.data.dataList;
                            vm.pageInfo = {
                                pageSize: response.data.pageNum,// 每页显示的数据量
                                nowPage: response.data.nowPage, // 当前页
                                total: response.data.totalNum // 总条数
                            };
                        })
                        ;
                    },
                    // 当前页发生变化时触发的事件
                    currentChange(val) {
                        this.gameSelect.nowPage = val;
                        this.search();
                    }, sizeChange(val) {// 每页显示的数据量变化时触发的事件
                        this.gameSelect.pageSize = val;
                        this.search();
                    },
                    handleClose(done) {
                        this.$confirm('确认关闭？')
                            .then(_ => {
                                done();
                            })
                            .catch(_ => {
                            });
                    },
                },
                mounted() {
                    this.search()
                }
            })
        </script>
    </body>
</html>
